\documentclass[francais]{beamer}

\mode<presentation>{
  \usetheme{Warsaw}
  \useoutertheme{infolines}
  \usecolortheme[rgb={0.8,0,0}]{structure}
  \usecolortheme{beaver}
  \setbeamercovered{transparent}
}

%\addtobeamertemplate{footline}{\insertframenumber/\inserttotalframenumber}

% packages
%\usepackage{ucs}
\usepackage[T1]{fontenc}
\usepackage[utf8]{inputenc}
\usepackage[francais]{babel}
\usepackage{babelbib}
\usepackage{lmodern}
\usepackage{graphicx}
\usepackage{translator}
\usepackage{verbatim}

\title[Jeu de plateforme en réseau]{Jeu vidéo de plateforme multi-joueurs en réseau}
\author[Nicolas DIOT \and Sophie TEIXEIRA]{\includegraphics[scale=0.5]{img/jumprun_right_blue}\hspace*{0.5cm} Nicolas DIOT \and Sophie TEIXEIRA \hspace*{0.5cm}\includegraphics[scale=0.5]{img/jumprun_left_red}}
\institute[UFC]{Encadrant : Laurent PHILIPPE \\ \bigskip \includegraphics[scale=0.20]{img/logo_ufc} \\ \medskip Université de Franche-Comté \\Master 2 Informatique }
\date[\today]{\today }


%\AtBeginSection[] {
%  \begin{frame}<beamer>
%    \frametitle{Sommaire}
%    \tableofcontents[currentsection]
%  \end{frame}
%}

\AtBeginSubsection[] {
  \begin{frame}<beamer>
    \frametitle{Sommaire}
    \tableofcontents[currentsection,currentsubsection]
  \end{frame}
}

\begin{document}

\begin{frame}
  \titlepage
 \end{frame}
 
 \begin{frame}{Sommaire}
  \tableofcontents
 \end{frame} 
 
%\section{Contexte}
%\subsection{Présentation du projet}
% \begin{frame}
%	\begin{block}{Notre projet}
%		\begin{itemize}
%		\item Proposer et développer par nous de A à Z
%		\item Application concrète des connaissances acquises en \texttt{SDR}
%		\item Durée de quatre mois
%		\end{itemize}	 	
% 	\end{block}
% \end{frame}

\section{Présentation du projet}
\subsection{Définition du projet}
 \begin{frame}{Le projet}
 	\begin{block}{Développement d'un jeu vidéo}
		\begin{itemize}
		\item Création d'un jeu vidéo de plateforme
		\item Possibilité de jouer à plusieurs en réseau
		\item Communications en temps réel
		\item Interactions entre les joueurs et l'environnement
		\end{itemize}	 	
 	\end{block}

 	\begin{block}{Lien avec la spécialité Systèmes Distribués et Réseaux}
		\begin{itemize}
		\item Application des connaissances vues en cours
		\item Réflexions sur des problèmes de synchronisation, optimisation et communication
		\end{itemize}	 	
 	\end{block}
 \end{frame}
 
%\subsection{Priorités et objectifs}
 \begin{frame}{Priorités et objectifs}
 \begin{block}{Priorités}
		\begin{itemize}
		\item Répondre aux exigences techniques plus que visuelles
		\item Priorité aux problématiques de communication, synchronisation et optimisation $\Rightarrow$ Modules graphiques et physiques placés en retrait
		\item Ensemble fluide, rapide et cohérent
		\end{itemize}		 	
 	\end{block}
 	
 	\begin{block}{Objectifs fixés}
		\begin{itemize}
		\item Au moins deux joueurs dans une partie
		\item Jeu de plateforme simple en deux dimensions %TODO Exemple jeu de plateforme ? 
		\item Utilisation du langage \texttt{C++}
		\end{itemize}		 	
 	\end{block}
 \end{frame}
  
%\section{Mise en \oe uvre}
%\subsection{Les choix technologiques}
\subsection{Les choix technologiques}
%\subsection*{Utiliser l'existant}
 \begin{frame}{Utilisation d'outils existants}
 	\begin{block}{Des outils pour ne pas tout développer}
		\begin{itemize}
		\item \texttt{Tiled} et \texttt{TmxParser} : création des niveaux du jeu 
		\item \texttt{SFML} : moteur graphique, gestion de l'affichage
		\item \texttt{Box2D} : moteur physique, gestion des collisions et de la gravité		
		\item[$\Rightarrow$] Permet de ne pas perdre de temps sur le développement des fonctionnalités gérées par ces modules
		\end{itemize}		 	
 	\end{block}
 \end{frame}
 
 %\subsection*{Création des niveaux}
 \begin{frame}{Création des niveaux}
 	\begin{block}{Le logiciel \texttt{Tiled}}
	\begin{itemize}
		\item Logiciel de création de niveau de jeu à base de tuiles
		\item Tuiles : petits carrés s'associant entre eux pour former une image
        \item Exporte les niveaux créés au format \texttt{TMX}
        %\item \texttt{TmxParser} intègre à Box2D des niveau au format \texttt{Tmx}
        \end{itemize}		 	
	\end{block}
	
	\begin{center}
    	    \includegraphics[scale=0.2]{img/area02_mock.jpg}
	       \hspace*{0.5cm} \includegraphics[scale=0.4]{img/area02_level_tiles.png}		
		\end{center}
 \end{frame}
 
 \begin{frame}{Intégration dans le jeu avec \texttt{TmxParser}}
	\begin{block}{\texttt{TmxParser}}
		\begin{itemize}
			\item \texttt{TMX} : dialecte \texttt{XML}
			\item Lecture du fichier grâce à la bibliothèque \texttt{TinyXML}
			\item Permet d'obtenir la position, la taille et le type
			\item Création des objets dans le jeu lors du parcours du fichier
		\end{itemize}
	\end{block}
 \end{frame}
 
 %\subsection*{Le moteur physique}
 \begin{frame}{Simulation physique avec \texttt{Box2D}}
 	\begin{block}{La librairie \texttt{Box2D}}
		\begin{itemize}
			\item Règles de physique : gravité, densité et friction
			%\item Solidité des objets
			\item Détection des collisions entre les objets
			%\item Utilisation du système métrique
		\end{itemize}		 	
 	\end{block}
 	
 	\begin{block}{Initialisation}
	 	\begin{itemize}
	 		\item Création d'un monde
 	 		\item Définition de la gravité
 			\item Création des objets
 		\end{itemize}
 	\end{block}
 	
 	\begin{center}
 		\includegraphics[scale=0.3]{img/box2d.jpg}
 	\end{center}
 \end{frame}
 
 \begin{frame}{Utilisation de \texttt{Box2D}}
 	\begin{block}{Les différents types d'objets}
% 		\begin{itemize}
% 			\item Les plateformes : objets statiques et solides
% 			\item Les joueurs : objets dynamiques, sujets à la gravité, pouvant se déplacer de manière libre et sauter
% 			\item Les monstres : objets cinématiques, non sujets à la gravité, se déplaçant selon un mouvement défini uniquement.
% 			\item Les objets que l'on peut ramasser : objets statiques.
% 			\item Les portes : objets statiques à travers lesquels les joueurs peuvent passer.
% 		\end{itemize}

		\begin{itemize}
			\item Trois types : statique, dynamique et cinématique
			\item Paramétrage de la sensibilité à la gravité et de la solidité
		\end{itemize}
 	\end{block}
 	
 	\begin{block}{L'écoute du monde}
 		\begin{itemize}
 			\item Création d'objets en tant que senseurs
 			\item Mise en place d'un \texttt{WorldListener}
 			\item Écoute constante des contacts entre les objets et mise à jour en conséquence
 		\end{itemize} 	
 	\end{block}
 \end{frame}
 
%\subsection{Description et utilisation des outils} 
 %\subsection*{L'affichage du jeu}
 \begin{frame}{SFML : Simple and Fast Multimedia Library}
	\begin{block}{Plus qu'un moteur graphique}		
		Divisé en 5 modules :
		\begin{itemize}
		\item \texttt{Graphics} : Gestion des affichages
        \item \texttt{Window} : Gestion des fenêtres et des événements interactifs
        \item \texttt{Network} : Gestion des communications
        \item \texttt{System} : Gestion des \textit{threads} et des \textit{mutex}
        \item \texttt{Audio} : Gestion des sons et de la musique 	
		\end{itemize}		 	
 	\end{block}
 	
 	\begin{center}
 		\includegraphics[scale=0.3]{img/sfml.png}
 	\end{center}
 \end{frame}
 
  
 
 \section{Architecture} 
 \subsection{Modèle}
   \begin{frame}{Architecture}
 	\begin{block}{Modèle Client/Serveur}
		\begin{itemize}
		\item Divise la charge entre les différentes parties du projet
		\item Évite la redondance de calcul %Les calculs sur le serveur ne sont pas clonés sur chaque client
        \item Impose une rigueur dans les algorithmes pour éviter les incohérences
        \end{itemize}		 	
	\end{block}
	\begin{center}
        \includegraphics[scale=0.15]{img/Architecture.jpg}	
	\end{center}
 \end{frame}
 
 \subsection{Répartition des tâches}
 \begin{frame}{Répartition des tâches}
 	\begin{block}{Qui est responsable de quoi ?}
		\begin{itemize}
		\item Le client s'occupe de l'affichage et des écoutes clavier
		\begin{itemize}
			\item[$\to$] Permet de ne pas encombrer le réseau en envoyant les informations d'affichage du serveur vers le client
        \end{itemize}		 	
        \item Le serveur fait les calculs de collision et de déplacements des objets dans le jeu
        \begin{itemize}
			\item[$\to$] Évite de dupliquer les calculs chez tous les clients
		\end{itemize}
        \end{itemize}		 	
	\end{block}
 \end{frame}
 
 \begin{frame}{Le client}
 	\begin{block}{Divisé entre l'affichage et l'écoute}
		Client partagé en deux \texttt{threads}
			\begin{enumerate}
				\item Un \texttt{thread} gère les écoutes du clavier
				\item Un autre \texttt{thread} gère la réception, l'animation et l'affichage des objets du monde
			\end{enumerate}	 	
	\end{block}
	\begin{center}
        \includegraphics[scale=0.2]{img/fonctionnementClient_2.jpg}	
	\end{center}
 \end{frame}
 
 \begin{frame}{Le serveur}
 	\begin{block}{L'intelligence du jeu}
		Serveur partagé en deux \texttt{threads}
		\begin{enumerate}
			\item Un \texttt{thread} gère la réception des informations clavier du client
			\item Un autre \texttt{thread} gère les déplacements des objets et les calculs de collisions. Ce même \texttt{thread} initialise la monde avec le fichier \texttt{Tmx} et \texttt{TmxParser}  
		\end{enumerate} 	
	\end{block}
	\begin{center}
        \includegraphics[scale=0.2]{img/fonctionnementServeur.jpg}	
	\end{center}
\end{frame}

 \section{Les communications}
	\subsection{Mise en place}
	\begin{frame}{Communications mises en place}
 	\begin{block}{Il faut communiquer}
		\begin{itemize}
		\item Communications basées sur des \texttt{sockets} en mode connecté
		\item Communication client vers serveur 
			\begin{itemize}
				\item[$\to$] Envoi des informations d'écoute des événements clavier
			\end{itemize}			
        \item Communication serveur vers client 
        	\begin{itemize}
        		\item[$\to$] Transmission des modifications des objets du monde
			\end{itemize}
        \item Utilisation d'une seule \texttt{socket} bidirectionnelle
         %TODO multidirectionnelle??? Pas d'autre mot en tete
        \end{itemize}		 	
	\end{block}
 \end{frame}
 
 
\begin{frame}{Allègement des communications}
 	\begin{block}{Diminuer la taille des transmissions}
 	Transmission du minimum d'informations possible pour chaque objet.
 		\begin{itemize}
 			\item[$\to$] Objets fixes : seulement leur état (sous forme d'un entier)
 		\end{itemize}
%		\begin{itemize}
%		\item Minimum d'informations transmises pour chaque objet
%		\item État des objets fixes $\Rightarrow$ Un entier
%        \item Objets mobiles $\Rightarrow$ Position, état, points, action et direction
%        \end{itemize}		 	
	\end{block}
	\begin{block}{Diminuer le nombre de transmissions}
		\begin{itemize}
			\item Le client n'envoie que les changements d'état du clavier 
			\item Le serveur n'envoie les objets fixes que s'ils ont changés d'état
        \end{itemize}		 	
	\end{block}
 \end{frame}
 
 \begin{frame}{Utilité de l'optimisation}
 	\begin{block}{Apparition de la surcharge}
		\begin{itemize}
		\item Surcharge sur la socket d'envoi des informations du serveur au client
		\item Boucle d'actualisation du monde trop rapide 
        \item File d'attente sur les transmissions $\Rightarrow$ latence de quelques secondes
        \end{itemize}		 	
	\end{block}
	\begin{block}{Résolution du problème}
		\begin{itemize}
			\item Temporisation au niveau de la boucle du monde
			\item Disparition de la surcharge et donc de la latence
        \end{itemize}		 	
	\end{block}
 \end{frame} 
 
 \subsection{Synchronisation}
 \begin{frame}{Outils de synchronisation}
 	\begin{block}{La liste d'actions}
 		\begin{itemize}
 			\item Réception des actions des joueurs par le serveur
 			\item Ajout des actions dans une liste chaînée
 			\item Lecture des actions une à une
 		\end{itemize}
 	\end{block}
 	
 	\begin{block}{Synchronisation de la liste}
 		\begin{itemize}
 			\item[$\Rightarrow$] Mise en place d'un mutex pour assurer qu'il n'y a pas d'accès simultané en lecture/écriture à la liste d'actions. 		
		\end{itemize} 		
 	\end{block}
 \end{frame}
 
 \section{Bilan}
 \subsection{État de l'application}
 \begin{frame}{État de l'application}
 	\begin{block}{Objectifs remplis}
 		\begin{itemize}
 			\item Jeu de plateforme avec deux joueurs en réseau
 			\item Jeu cohérent chez les deux clients
 			\item Communications et synchronisation efficaces
 			\item Optimisations pour améliorer les performances
 		\end{itemize}
 	\end{block}
 	
 	\begin{block}{Améliorations possibles}
 		\begin{itemize}
 			\item Augmentation du nombre de joueurs possibles
 			\item Création d'actions nécessitant de la collaboration
 		\end{itemize} 	
 	\end{block}
 \end{frame}
 
 \begin{frame}{Démonstration}
 	\begin{block}{}
 		\begin{center}
 			A vos manettes !
 		\end{center}
 	\end{block} 
 \end{frame}  
 
 \subsection{Conclusion}
 \begin{frame}{Conclusion}
 	\begin{block}{Pour conclure}
 		\begin{itemize}
 			\item Projet abouti
 			\item Respect des priorités fixées
 			\item Application des connaissances acquises en Master
 		\end{itemize}
 	\end{block}	
 \end{frame}
 
 \begin{frame}{The End}
% 	\begin{block}{}
%	 	\begin{center}
% 			Merci de votre attention !\\
% 			Avez-vous des questions ? 
% 		\end{center} 		
% 	\end{block}
	\begin{center}
		\includegraphics[scale=0.5]{img/final.png}
	\end{center}
 \end{frame}
 
\end{document}